<template>
  <div class="page-3 f-r f-g">
    <el-row :gutter="16" style="width: 100%;height: 100%">
      <el-col :span="6">
        <div class="left-card">
          <div class="card-header f-r a-c j-b">
            <div class="card-title" style="font-size: 16px">使用文档</div>
          </div>
          <div class="card-body">
            <div class="file-list">
              <div
                  :class="['file-item f-r a-c', activeFile.id === item.id ? 'active' : '']" v-for="item in fileList" :key="item.id">
                <div class="f-g f-r a-c"   @click="handleClickFile(item)">
                  <div class="file-detail f-g">
                    <div class="file-name">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="left-card right-card" >
          <div class="doc-title">{{ docDetail.title }}</div>
          <div class="doc-content" v-html="docDetail.content"></div>
          <div class="bottom-tool f-r a-c">
            <img src="@/assets/other/doc.png" class="f-s" alt=""  >
            <span class="tool-name f-g">是否开放项目api</span>
            <span class="tool-name-light f-s">已开放</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref } from "vue";
const fileList = ref([
  {
    id: 1,
    name: '1、如何注册？',
  },
  {
    id: 2,
    name: '2、使用遇到bug如何处理？',
  }
])
const activeFile = ref({
  id: 1
})
const docDetail = ref({
  title: '使用遇到bug如何处理？',
  content: '1、遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明；遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明。</br>' +
      '2、遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明；遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明。遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明；遇到bug请第一时间联系客服反馈对应的问题说明，遇到bug请第一时间联系客服反馈对应的问题说明。'
})
const handleClickFile = (row) => {
  activeFile.value = row
}

</script>

<style lang="scss">
.page-3 {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .left-card {
    height: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    .card-header {
      padding: 20px;
      border-bottom: 1px solid #F2F2F2;
    }
  }
  .card-body {
    padding: 10px 0;
    .file-list {
      .file-item {
        padding: 10px 20px;
        cursor: pointer;
        &.active {
          .file-detail .file-name {
            color: #17BDB2;
          }
        }
        .file-detail {
          height: 100%;
          .file-name {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #656565;
          }
        }
      }
    }
  }
  .right-card {
    height: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
    .doc-title {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 26px;
      color: #191919;
      line-height: 43px;
      text-align: center;
      margin-bottom: 30px;
    }
    .doc-content {
      flex-grow: 1;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 51px;
    }
    .bottom-tool {
      background: #F1F1F1;
      border-radius: 10px;
      padding:15px 30px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 27px;
        height: 25px;
        margin-right: 10px;
      }
      .tool-name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 21px;
      }
      .tool-name-light {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #17BDB2;
        line-height: 21px;
        margin-left: 20px;
      }
    }

  }
}

</style>